<div class="page-header">
    <h1 class="page-title">控制台</h1>
    <ul class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">控制台</a></li>
        <li>概览</li>
    </ul>
</div>

<!-- 数据统计卡片 -->
<div class="stats-container">
    <div class="stat-card">
        <div class="stat-icon" style="background-color: #3498db;">
            <i class="bi bi-people"></i>
        </div>
        <div class="stat-info">
            <h3>1,254</h3>
            <p>总用户数</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background-color: #2ecc71;">
            <i class="bi bi-cart"></i>
        </div>
        <div class="stat-info">
            <h3>324</h3>
            <p>今日订单</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background-color: #e74c3c;">
            <i class="bi bi-currency-dollar"></i>
        </div>
        <div class="stat-info">
            <h3>¥48,562</h3>
            <p>今日销售额</p>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background-color: #9b59b6;">
            <i class="bi bi-graph-up"></i>
        </div>
        <div class="stat-info">
            <h3>68%</h3>
            <p>转化率</p>
        </div>
    </div>
</div>

<!-- 修改后的销售趋势和热门产品部分 -->
<div style="display: flex; gap: 20px; margin-bottom: 20px;">
    <div style="flex: 2;">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">销售趋势</h3>
                <div>
                    <select style="padding: 5px 10px; border-radius: 4px; border: 1px solid #ddd; background-color: white; cursor: pointer;">
                        <option>最近7天</option>
                        <option>最近30天</option>
                        <option>本季度</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <div style="height: 300px; position: relative;">
                    <canvas id="salesChart"></canvas>
                </div>
                <div style="display: flex; justify-content: center; margin-top: 15px; gap: 15px;">
                    <div style="display: flex; align-items: center;">
                        <div style="width: 12px; height: 12px; background-color: #3498db; border-radius: 2px; margin-right: 5px;"></div>
                        <span style="font-size: 12px; color: #7f8c8d;">线上销售</span>
                    </div>
                    <div style="display: flex; align-items: center;">
                        <div style="width: 12px; height: 12px; background-color: #2ecc71; border-radius: 2px; margin-right: 5px;"></div>
                        <span style="font-size: 12px; color: #7f8c8d;">线下销售</span>
                    </div>
                    <div style="display: flex; align-items: center;">
                        <div style="width: 12px; height: 12px; background-color: #f1c40f; border-radius: 2px; margin-right: 5px;"></div>
                        <span style="font-size: 12px; color: #7f8c8d;">总销售额</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="flex: 1;">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">热门产品</h3>
                <div style="font-size: 12px; color: #95a5a6;">按销量排序</div>
            </div>
            <div class="card-body" style="padding: 0;">
                <ul style="list-style: none; padding: 0; margin: 0;">
                    <li style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; transition: background-color 0.2s;">
                        <div style="width: 40px; height: 40px; background-color: #f1f1f1; border-radius: 4px; margin-right: 12px; display: flex; align-items: center; justify-content: center; color: #7f8c8d;">
                            <i class="bi bi-phone" style="font-size: 18px;"></i>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 500; margin-bottom: 3px;">高端智能手机</div>
                            <div style="display: flex; justify-content: space-between; font-size: 12px;">
                                <span style="color: #95a5a6;">销量: 156</span>
                                <span style="color: #e74c3c; font-weight: 600;">¥12,450</span>
                            </div>
                        </div>
                    </li>
                    <li style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; transition: background-color 0.2s;">
                        <div style="width: 40px; height: 40px; background-color: #f1f1f1; border-radius: 4px; margin-right: 12px; display: flex; align-items: center; justify-content: center; color: #7f8c8d;">
                            <i class="bi bi-earbuds" style="font-size: 18px;"></i>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 500; margin-bottom: 3px;">无线耳机</div>
                            <div style="display: flex; justify-content: space-between; font-size: 12px;">
                                <span style="color: #95a5a6;">销量: 128</span>
                                <span style="color: #e74c3c; font-weight: 600;">¥8,960</span>
                            </div>
                        </div>
                    </li>
                    <li style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; transition: background-color 0.2s;">
                        <div style="width: 40px; height: 40px; background-color: #f1f1f1; border-radius: 4px; margin-right: 12px; display: flex; align-items: center; justify-content: center; color: #7f8c8d;">
                            <i class="bi bi-smartwatch" style="font-size: 18px;"></i>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 500; margin-bottom: 3px;">智能手表</div>
                            <div style="display: flex; justify-content: space-between; font-size: 12px;">
                                <span style="color: #95a5a6;">销量: 97</span>
                                <span style="color: #e74c3c; font-weight: 600;">¥14,550</span>
                            </div>
                        </div>
                    </li>
                    <li style="padding: 15px; display: flex; align-items: center; transition: background-color 0.2s;">
                        <div style="width: 40px; height: 40px; background-color: #f1f1f1; border-radius: 4px; margin-right: 12px; display: flex; align-items: center; justify-content: center; color: #7f8c8d;">
                            <i class="bi bi-laptop" style="font-size: 18px;"></i>
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 500; margin-bottom: 3px;">笔记本电脑</div>
                            <div style="display: flex; justify-content: space-between; font-size: 12px;">
                                <span style="color: #95a5a6;">销量: 85</span>
                                <span style="color: #e74c3c; font-weight: 600;">¥42,500</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div style="padding: 12px 15px; text-align: center; border-top: 1px solid #eee;">
                    <a href="#" style="color: var(--primary-color); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center;">
                        <i class="bi bi-arrow-right" style="margin-left: 5px;"></i> 查看所有产品
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">最近订单</h3>
        <button style="background-color: var(--primary-color); color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">
            <i class="bi bi-download"></i> 导出
        </button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th>订单编号</th>
                    <th>客户</th>
                    <th>日期</th>
                    <th>金额</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>#ORD-2023-001</td>
                    <td>张三</td>
                    <td>2023-06-15</td>
                    <td>¥2,499.00</td>
                    <td><span class="badge badge-success">已完成</span></td>
                    <td><a href="#" style="color: var(--primary-color);">查看</a></td>
                </tr>
                <tr>
                    <td>#ORD-2023-002</td>
                    <td>李四</td>
                    <td>2023-06-14</td>
                    <td>¥1,299.00</td>
                    <td><span class="badge badge-success">已完成</span></td>
                    <td><a href="#" style="color: var(--primary-color);">查看</a></td>
                </tr>
                <tr>
                    <td>#ORD-2023-003</td>
                    <td>王五</td>
                    <td>2023-06-14</td>
                    <td>¥899.00</td>
                    <td><span class="badge badge-warning">处理中</span></td>
                    <td><a href="#" style="color: var(--primary-color);">查看</a></td>
                </tr>
                <tr>
                    <td>#ORD-2023-004</td>
                    <td>赵六</td>
                    <td>2023-06-13</td>
                    <td>¥3,299.00</td>
                    <td><span class="badge badge-danger">已取消</span></td>
                    <td><a href="#" style="color: var(--primary-color);">查看</a></td>
                </tr>
                <tr>
                    <td>#ORD-2023-005</td>
                    <td>钱七</td>
                    <td>2023-06-12</td>
                    <td>¥599.00</td>
                    <td><span class="badge badge-success">已完成</span></td>
                    <td><a href="#" style="color: var(--primary-color);">查看</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 在页面底部添加Chart.js库和图表脚本 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 销售趋势图表
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('salesChart').getContext('2d');
        const salesChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [
                    {
                        label: '线上销售',
                        data: [12500, 18900, 17800, 21000, 23400, 28500],
                        borderColor: '#3498db',
                        backgroundColor: 'rgba(52, 152, 219, 0.1)',
                        borderWidth: 2,
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '线下销售',
                        data: [8000, 12000, 10500, 12500, 14800, 16500],
                        borderColor: '#2ecc71',
                        backgroundColor: 'rgba(46, 204, 113, 0.1)',
                        borderWidth: 2,
                        tension: 0.3,
                        fill: true
                    },
                    {
                        label: '总销售额',
                        data: [20500, 30900, 28300, 33500, 38200, 45000],
                        borderColor: '#f1c40f',
                        backgroundColor: 'rgba(241, 196, 15, 0.1)',
                        borderWidth: 2,
                        tension: 0.3,
                        fill: true,
                        borderDash: [5, 5]
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ¥' + context.raw.toLocaleString();
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        },
                        ticks: {
                            callback: function(value) {
                                return '¥' + value.toLocaleString();
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    });
</script>

<style>
    /* 这里放置dashboard.html特有的样式 */
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .page-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--secondary-color);
    }

    .breadcrumb {
        display: flex;
        list-style: none;
        color: #95a5a6;
    }

    .breadcrumb li {
        margin-right: 10px;
    }

    .breadcrumb li:after {
        content: '/';
        margin-left: 10px;
    }

    .breadcrumb li:last-child:after {
        content: '';
    }

    .breadcrumb a {
        color: #95a5a6;
        text-decoration: none;
    }

    .breadcrumb a:hover {
        color: var(--primary-color);
    }

    /* 卡片样式 */
    .card {
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
        overflow: hidden;
    }

    .card-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--secondary-color);
    }

    .card-body {
        padding: 20px;
    }

    /* 数据统计卡片 */
    .stats-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .stat-card {
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 20px;
        color: white;
    }

    .stat-info h3 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 5px;
        color: var(--secondary-color);
    }

    .stat-info p {
        color: #95a5a6;
        font-size: 14px;
    }

    /* 表格样式 */
    .table-responsive {
        overflow-x: auto;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
    }

    .table th, .table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .table th {
        background-color: #f8f9fa;
        color: var(--secondary-color);
        font-weight: 600;
    }

    .table tr:hover {
        background-color: #f8f9fa;
    }

    .badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge-success {
        background-color: #d4edda;
        color: #155724;
    }

    .badge-warning {
        background-color: #fff3cd;
        color: #856404;
    }

    .badge-danger {
        background-color: #f8d7da;
        color: #721c24;
    }
</style>